<template>
    <div class="immediate">
        <div class="cont clearfix">
            <p>评价</p>
            <div class="content clearfix">
                <ul class="clearfix">
                    <li class="clearfix"><span>环&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;境 <b>*</b>：</span><div> <Rate v-model="value" /></div></li>
                    <li class="clearfix"><span>专&nbsp;业&nbsp;度 <b>*</b>：</span><div> <Rate v-model="value1" /></div></li>
                    <li class="clearfix"><span>服&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务 <b>*</b>：</span><div> <Rate v-model="value2" /></div></li>
                    <li class="clearfix"><span>效&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;果 <b>*</b>：</span><div> <Rate v-model="value3" /></div></li>
                    <li class="clearfix"><span>评价项目：</span>
                        <div style="width: 360px">
                            <Input v-model="evaluate" type="textarea"  style="resize:none" :autosize="{minRows: 5,maxRows: 10}" placeholder="请输入评价....." />
                        </div>

                    </li>
                    <li class="clearfix"><span>评价项目：</span>
                        <div>
                            <el-upload
                                    action="http://www.hfbb.com/api/common/upload"
                                    list-type="picture-card"
                                    :on-remove="handleRemove"
                                    :on-success="succe"
                                    :limit='3'
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <p>最多上传3张</p>
                        </div>
                    </li>
                </ul>
                <span @click="subimt()" style="cursor: pointer">确认提交</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Immediate",
        data () {
            return {
                value:0,
                value1:0,
                value2:0,
                value3:0,
                id:'',
                evaluate:'',
                img:[]

            }
        },
        created () {
            this.id = this.$route.query.id
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            succe (response, file, fileList) {
                this.img.push(response.data.url)
            },
            subimt () {
                let _this = this
                _this.$post('/api/shop/evaluate',
                    {
                        token:_this.$token,
                        order_id:_this.id,
                        science:_this.value,
                        degree:_this.value1,
                        service:_this.value2,
                        effect:_this.value3,
                        evaluate:_this.evaluate,
                        images:_this.img,
                    },function (res) {
                        _this.$message.success(res.msg);
                    },function (err,errmsg,errcode) {
                        _this.$message.error(errmsg);

                    }
                )
            }
        }
    }
</script>

<style  lang="less">
    @import "../../../style/style";
    .immediate{
        .el-upload--picture-card{
            width: 90px;
            height: 90px;
            line-height: 100px;
        }
        .cont {
            border: solid 1px #e0e0e0;
            padding: 20px;
            > :first-child {
                width: 100%;
                color: @theme-color-dark;
                font-size: 18px;
                border-bottom: 1px solid @theme-color-dark;
                margin-bottom: 20px;
            }
            .content{
                >span{
                    background-color: @theme-color-dark;
                    font-size: 14px;
                    color: white;
                    padding: 12px 90px;
                    border-radius: 4px;
                    margin-left: 76px;
                }
                .ivu-rate{
                    margin-top: -6px;
                }
                >ul{
                    li{
                        min-height: 40px;
                        >span{
                            color: #666666;
                            font-size: 14px;
                            float: left;
                            display: block;
                            b{
                                color: @theme-color-dark;
                            }
                        }
                        >div{
                            float: left;
                            width: 86%;
                            margin-left: 1%;
                            textarea{
                                padding: 10px;
                                border: solid 1px #e0e0e0;
                            }
                        }
                    }
                    >:last-child{
                        margin-top: 10px;
                        margin-bottom: 50px;
                        >div{
                            min-width: 360px;
                            /*height: 165px;*/
                            border: solid 1px #e0e0e0;
                            padding: 20px;
                            p{
                                padding-top: 10px;
                                text-align: center;
                            }
                        }
                    }
                }
                .img{
                    width: 100%;
                    margin-top: 20px;
                    img{
                        width: 150px;
                        height: 150px;
                        margin-right: 50px;
                    }
                    >:nth-child(3n+3){
                        margin-right: 0;
                    }
                }
            }
        }
    }

</style>